<script setup lang="ts">
import DoubtButton from './doubt-button.vue';

interface Props {
  questionIndex: number;
  stem: string;
  score: string | number;
  isMarked?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  isMarked: false,
});

const emit = defineEmits<{
  mark: [];
}>();

const handleMark = () => {
  emit('mark');
};
</script>

<template>
  <div class="question-header flex justify-between items-start">
    <div class="text-sm text-[#191919]">
      {{ questionIndex }}. {{ stem }}
      <span class="text-sm text-gray-500 ml-2">({{ score }}{{ $t('examCore.scoreUnit') }})</span>
    </div>
    <DoubtButton :is-marked="isMarked" @toggle="handleMark" />
  </div>
</template>

<style scoped>
.question-header {
  align-items: flex-start;
}
</style>
